<template>
	<view class="page-content">
		<view class="share-logo">
			<image :src="configInfo.poster_luodi_top_logo || logo" mode="widthFix" style="width:500rpx;"></image>
		</view>
		<view class="share-warper">
			<view class="share-warper_header flex-center flex-column">
				<text class="text-sm text-warning" v-if="parentUsername">来自好友{{parentUsername}}的邀请</text>
				<text class="text-sm text-warning" v-if="!parentUsername">加入我们轻松做任务赚收益</text>
				<text class="share-warper_header-slogan m-t-sm">{{configInfo.poster_luodi_wel_text || '一大波新人福利正在等着你'}}</text>
			</view>
			<u-transition class="share-warper_welcome"  :show="welcomeShow">
				<view class=" flex-center flex-column">
					<view class="share-warper_welcome-text flex-center flex-column">
						<text>恭喜您，注册成功！</text>
						<text class="share-warper_welcome-slogan m-t-sm">请前往您的账户查看新人奖励</text>
					</view>
					<view class="share-warper_welcome-btns" v-if="configInfo.poster_luodi_jump_btn">
						<u-button class="zoom" shape="circle" formType="submit" color="#ffd426" :text="configInfo.poster_luodi_jump_btn"  :style="{'color':'#232426','box-shadow': '0 5px 10px 0 #23242630'}" @click="jump"></u-button>
					</view>
				</view>
			</u-transition>
			<u-transition class="share-warper_form"  :show="!welcomeShow">
				<form @submit="submit" class="form-warp flex-center flex-column">
					<view class="share-warper_form-item form-warp_item flex-start">
						<view class="form-warp_item-label flex-center">
							<i-icon name="smartphone-line" color="#666"></i-icon>
						</view>
						<view class="form-warp_item-inline">
							<input type="text" name="mobile" placeholder="请输入手机号码" class="input" v-model="mobile"/>
						</view>
						<u-transition class="form-warp_item-btn flex-center p-l-sm p-r-sm" :show="true" v-if="configInfo.user_verification == 1 && mobile">
							<text class="text-xs text-danger" @click="smsBtnClick">{{!isGetSms ? '获取验证码' : '填写验证码'}}</text>
						</u-transition>
					</view>
					<view class="share-warper_form-item form-warp_item m-t-md flex-start">
						<view class="form-warp_item-label flex-center">
							<i-icon name="lock-line" color="#666"></i-icon>
						</view>
						<view class="form-warp_item-inline">
							<input type="password" name="password" placeholder="请输入密码" class="input"/>
						</view>
					</view>
					<view class="m-t-md">
						<u-button shape="circle" formType="submit" color="#ffd426" :text="configInfo.poster_luodi_reg_btn || '注册'"  :style="{'color':'#232426','box-shadow': '0 5px 10px 0 #23242630'}"></u-button>
					</view>
				</form>
			</u-transition>
			<image src="@/static/images/share_hongbao.png" mode="widthFix">
		</view>
		<view class="share-footer text-center p-md">
			<text class="text-xs">* 新用户注册奖励已实际到账为准，若账户无奖励则表示活动已结束或数量有限已发放完毕，最终解释权归平台所有</text>
		</view>
		<m-modal
			:show="invitationCodeShow"
			title="填写邀请码"
			btn="确定"
			@close="invitationCodeShow = false"
			@btnComplete="invitationCodeShow = false"
		>
			<view class="slot-content p-t-md p-b-md flex-center">
				<view class="modal-form">
					<view class="modal-form_item flex-between">
						<view class="modal-form__inline">
							<input type="text" placeholder="请输入邀请码" class="input" v-model="invitationCode"/>
						</view>
					</view>
				</view>
				<view class="text-center m-t-sm">
					<text class="text-xs text-warning">需要填写正确的验证码方可成功注册</text>
				</view>
			</view>
		</m-modal>
		<m-modal
			:show="smsCodeShow"
			title="请输入您收到的验证码"
			btn="确定"
			@close="closeSmsCodeModal"
			@btnComplete="smsCodeShow = false"
		>
			<view class="p-t-md p-b-md">
				<u-code-input v-model="smsCode" :maxlength="6"></u-code-input>
				<view class="text-center m-t-md" v-if="isGetSms">
					<u-count-down
						:time="smsCodeTime * 1000"
						format="ss"
						autoStart
						millisecond
						@change="smsCodeOnChange"
						@finish="smsCodeFinish"
						v-if="smsCodeStarDown"
					>
						<view class="flex-center text-sm text-warning">
							<view class="time__custom">
								<text class="time__custom__item">{{ smsCodeTimeData.seconds }}</text>
							</view>
							<text class="time__doc">s 后可重新获取</text>
						</view>
					</u-count-down>
					<m-icon class="text-sm text-danger" name="refresh-line" text="重新获取验证码" @click="getSmsCode" v-if="!smsCodeStarDown"></m-icon>
				</view>
			</view>
		</m-modal>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	// Base64
	import {Base64} from "@/utils/base64.js"
	export default {
		data() {
			return {
				mobile:'',
				invitationCode:'',
				parentUsername:'',
				welcomeShow:false,
				logo:'/static/images/share_logo.png',
				invitationCodeShow:false,
				smsCodeShow:false,
				smsCode:'', // 验证码
				smsCodeTime:60, // 倒计时多少秒
				isGetSms:false,
				smsCodeStarDown:false,// 验证码倒计时开始
				smsCodeTimeData: {}, //
				smsCodeSurplusTime:0,
			}
		},
		computed: mapState({
			userInfo: state => state.user.userInfo,
			configInfo: state => state.config.configInfo,
		}),
		onLoad(option){
			this.init(option.code)
		},
		onShow(){
			// console.log(this.configInfo)
		},
		methods: {
			init(code = ''){
				if(code){
					let data = JSON.parse((new Base64()).decode(code))
					let {
						invitation_code,
						username
					} = data
					this.invitationCode = invitation_code
					this.parentUsername = username
				}
				this.$util.clearCache(true)
			},
			
			// 提交注册数据
			async submit(e){
				let data = e.mp.detail.value
				data['password_confirm'] = data.password
				if(this.invitationCode)data['invitation_code'] = this.invitationCode
				if(this.smsCode)data['smscode'] = this.smsCode
				console.log(data)
				let res = await this.$api.user.reg(data)
				if(res.code == 200){
					this.$util.showToast(res.msg)
					this.welcomeShow = true
				}
				// 弹出填写邀请码的弹窗
				if(res.code == '20004'){
					this.invitationCodeShow = true
				}
				console.log(res)
			},

			// 获取验证码
			smsBtnClick(){
				if(!this.isGetSms){
					this.getSmsCode()
				}else{
					this.smsCodeShow = true
				}
			},
			
			// 获取验证码
			async getSmsCode(){
				this.$util.showLoading('正在发送')
				let data = {
					mobile:this.mobile
				}
				let res = await this.$api.user.getSms(data)
				if(res.code == 200){
					this.$util.showToast('发送成功')
					this.isGetSms = true
					this.smsCodeStarDown = true
					this.smsCodeTime = 60
					this.smsCodeShow = true
					this.$util.hideAll()
				}
			},
			
			// 验证码倒计时
			smsCodeOnChange(e) {
			    this.smsCodeTimeData = e
				this.smsCodeSurplusTime = e.seconds
			},
			
			// 验证码倒计时结束
			smsCodeFinish(){
				this.smsCodeStarDown = false
			},
			
			// 关闭验证码输入框
			closeSmsCodeModal(){
				this.smsCodeShow = false
				this.smsCodeTime = this.smsCodeSurplusTime
			},
			
			// 跳转
			jump(){
				let url = this.configInfo.poster_luodi_jump_link
				if(url){
					// #ifdef H5
					window.open(url);
					// #endif
					// #ifdef APP-PLUS
					plus.runtime.openURL(url);
					// #endif
				}
			}
		}
	}
</script>

<style lang="scss">
	// uni-page-body{
	// 	height: 100%!important;
	// }
	page{
		background: url('@/static/images/share_bg.png')  no-repeat top center  ;
		background-size: 100%;
		box-sizing: border-box;
		/* background-color: #fcefdf; */
		background-color: #ffac70;
		height: 100%;
	}
	.share-logo{
		padding-top: 200rpx;
		width: 100%;
		text-align: center;
		image-rendering: -moz-crisp-edges;
		image-rendering: -o-crisp-edges;
		image-rendering: -webkit-optimize-contrast;
		image-rendering: crisp-edges;
	}
	// .form-item{
		
	// }
	.share-warper{
		margin-top: 50rpx;
		position: absolute;
		text-align: center;
		width: 100%;
		z-index: 2;
		&_header{
			margin-top: 50rpx;
			position: absolute;
			width: 100%;
			z-index: 1;
		}
		&_header-slogan{
			max-width: 460rpx;
			font-size: 38rpx;
			font-weight: 600;
			color: var(--theme-danger);
		}
		&_welcome{
			position: absolute;
			margin-top: 480rpx;
			z-index: 2;
			width: 100%;
		}
		&_welcome-text{
			color: #ffd426;
			font-weight: bold;
		}
		&_welcome-slogan{
			font-size: 36rpx;
		}
		&_welcome-btns{
			margin-top: 40rpx;
			width: 300rpx;
			text-align: center;
		}
		&_form{
			margin-top: 420rpx;
			position: absolute;
			width: 100%;
			z-index: 1;
		}
		&_form-item{
			border-radius: 25px;
			padding: 20rpx 30rpx;
			background-color: #fff;
			width: 500rpx;
			// opacity: .8;
		}
		&_form-item input{
			text-align: left;
			font-size: 30rpx;
			padding-left: 15rpx;
		}
		image{
			width: 100%;
			image-rendering: -moz-crisp-edges;
			image-rendering: -o-crisp-edges;
			image-rendering: -webkit-optimize-contrast;
			image-rendering: crisp-edges;
			-ms-interpolation-mode: nearest-neighbor;
		}
	}
	.share-footer{
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
	}
	.zoom{
		-webkit-animation: zoom-transform 1s linear alternate infinite;
		animation: zoom-transform 1s linear alternate infinite;
	}
	@-webkit-keyframes zoom-transform{
	    0%{-webkit-transform:scale(0.9);}
	    100%{-webkit-transform:scale(1);}
	}
	@keyframes zoom-transform{
	    0%{transform:scale(0.9);}
	    100%{transform:scale(1);}
	}
</style>